<template>
  <div>child</div>
  <p>{{ count }}</p>
  <button @click="update">按钮</button>
  <p>{{ state.person.name }}</p>
  <p>{{ money }}</p>
</template>

<script>
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default {
  name: "Child",
  // composition API 组合式API
  // reactive API 响应式API
  prop: {},
  emits: [],
  components: {},
  setup() {
    // setup本身就相当于beforeCreate created
    onMounted(() => {
      console.log("onMounted");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });

    console.log("setup");
    // 定义响应式数据
    // 定义单个
    const count = ref(0);
    // 定义多个
    const state = reactive({
      num: 0,
      person: {
        name: "jack",
      },
    });

    // 定义方法
    const update = () => {
      count.value++;
    };

    const money = computed(() => {
      return "￥" + count.value;
    });
    // const money = computed({
    //   get() {},
    //   set() {}
    // })

    watch(
      count,
      (newVal, oldVal) => {
        console.log("watch触发了");
      },
      {
        immediate: true,
        // deep: true
      }
    );

    // 暴露出去
    return {
      count,
      update,
      state,
      money,
    };
  },
};
</script>

<style></style>
